/**
 * @description  投资集中度控制
 * @author zls
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin } from 'antd';
import { SecondHeaderC, TableC, FirstHeaderC } from '../../../comps';
import Style from './style.less';
import ketou from '../../../assets/busi/reportingServices/tick_icon.png';
import buketou from '../../../assets/busi/reportingServices/cross_icon.png';
import columnsDict from './columnsDict';

class concentrationControl extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {}

  UNSAFE_componentWillReceiveProps(nextProps) {}

  //获取columns
  getColumnsData = (title) => {
    let columns = [];
    columnsDict.map((item) => {
      if (item.title == title) {
        columns = item.columns;
      }
    });
    return columns;
  };

  getRowSpan = (obj, length, index) => {
    const newObj = {};
    let a = 0;

    if (index === 0) a = length;
    for (let i in obj) {
      newObj[i] = a;
    }

    return newObj;
  };

  getDataSource = (data) => {
    if (!data) return undefined;
    let arr = [];
    data.map((x) => {
      if (x.children) {
        let arr1 = this.getDataSource(x.children);
        arr = arr.concat(
          arr1.map((y, yindex) => {
            return { ...y, ...x, children: undefined, rowSpan: { ...(y.rowSpan || {}), ...this.getRowSpan(x, arr1.length, yindex) } };
          }),
        );
      } else {
        arr.push(x);
      }
    });
    return arr;
  };
  //明细打开关闭 type ==》false true  row当前条目相关数据
  changeStatus = (type, row) => {
    let data = this.props.data;
    data.map((item) => {
      if (item.title == row.title) {
        item.showDetail = type;
      }
    });
    this.props.changeData(data);
  };

  getColumns = (columns) => {
    const { cashManagementReportM } = this.props;
    const { securityBondTypeList } = cashManagementReportM;
    return columns
      ?.map((x) => {
        //资产类型
        if (x.key === 'type') {
          return {
            ...x,
            width: 80,
            render: (text) => securityBondTypeList?.filter((r) => r.code == text)[0]?.value || '--',
          };
        }

        if (
          x.key === 'productname' ||
          x.key == 'issuer' ||
          x.key === 'portfolioWeightcoefficient' ||
          x.key === 'issuer' ||
          x.key === 'creditrating' ||
          x.key === 'subtype' ||
          x.key === 'portfolioWeightcoefficient1'
        ) {
          return {
            ...x,
            render: (text, row, index) => {
              const obj = {
                children: text !== 0 && !text ? '--' : text,
                props: {},
              };
              obj.props.rowSpan = row.rowSpan && row.rowSpan[x.key];
              return obj;
            },
          };
        }
        // 持仓数量、
        if ((x.key === 'amount', x.key === 'currentamount')) {
          return {
            ...x,
            type: 'number',
          };
        }
        // 估值净价、估值全价、市值（全价）
        if (x.key === 'netvaluation' || x.key === 'totalvaluation' || x.key === 'marketvalue') {
          return {
            ...x,
            type: 'money',
          };
        }
        if (x.key == 'weightcoefficient') {
          return {
            ...x,
            align: 'right',
          };
        }
        return x;
      })
      ?.concat([{ dataIndex: 'konglie', title: '', key: 'konglie', render: () => '' }]); //添加个空列，解决表头导出的样式问题
  };

  render() {
    const { data } = this.props;
    const { loading } = this.props;
    const iconInfo = {
      0: {
        className: 'prohibit',
        img: buketou,
        name: '禁止',
      },
      1: {
        className: 'adopt',
        img: ketou,
        name: '通过',
      },
    };
    return (
      <>
        <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
          <FirstHeaderC title='投资集中度控制' bottomHeight={false} />
        </div>
        {data &&
          data?.map((r, index) => {
            return (
              <div key={index}>
                {r?.title && (
                  <div name={'xjgl-pdf'} style={{ marginBottom: '16px' }}>
                    <SecondHeaderC
                      title={r.title}
                      Left={
                        <div className={Style[iconInfo[r.state]?.className]} style={{ marginLeft: '20px' }}>
                          {' '}
                          <img src={iconInfo[r.state]?.img} /> {iconInfo[r.state]?.name}
                        </div>
                      }
                      bottomHeight={false}
                      arrowBtn={r.dataSource?.length ? true : false}
                      arrowBtnPosition={'right'}
                      arrowBtnTxt={'明细'}
                      showContent={r?.showDetail}
                      onExpendClick={(e) => this.changeStatus(e, r)} //展开箭头按钮事件
                    />
                  </div>
                )}
                {r?.showDetail && (r?.dataSource?.length != 0 || loading.effects['cashManagementReportM/queryReport']) && (
                  <div name={'xjgl-pdf'} isTable='true' style={{ marginBottom: '16px' }}>
                    <TableC
                      columns={this.getColumns(this.getColumnsData(r.title) || [])}
                      dataSource={this.getDataSource(index != 2 ? [{ children: r?.dataSource }] : r?.dataSource) || []}
                      hidePage={true}
                      rowClassName={(record) => {
                        return record.isRealHold === '0' ? `${Style.rowclassname} ${Style.redCls}` : `${Style.rowclassname} table-row`;
                      }}
                    ></TableC>
                  </div>
                )}
              </div>
            );
          })}
      </>
    );
  }
}
export default connect(({ cashManagementReportM, loading }) => ({
  cashManagementReportM,
  loading,
}))(concentrationControl);
